<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .view {
            --itemW: 25%;
            --gridW: 900px;
            --itemH: 200px;
            --viewW: calc(var(--gridW) * 0.25);
            width: var(--viewW);
            height: var(--itemH);
            margin: auto;
            overflow: hidden;
        }
        .grids {
            transition: all .3s linear;
            transform-origin: 0px 0px;
            transform: scale(0.4);
            width: var(--gridW);
            height: auto;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
        }

        .grids_item {
            width: var(--itemW);
            height: var(--itemH);
            box-sizing: border-box;
            padding: 5px 5px;
        }

        .grids_item_inner {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            color: #333;
            height: 100%;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: -2px -2px 4px #3b8ce97a,
                2px 2px 4px #5bc3747a;
        }
    </style>
</head>

<body>
    <div class="view">
        <div class="grids">
            <div class="grids_item">
                <div class="grids_item_inner">1</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">2</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">3</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">4</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">5</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">6</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">7</div>
            </div>
            <div class="grids_item">
                <div class="grids_item_inner">8</div>
            </div>
            
        </div>
    </div>

</body>
<script>
    let grids_items = [...document.querySelectorAll('.grids_item')];
    let trLen = 2;
    let trLenDif = grids_items.length / 2;
    let active = 0;
    let activeTr = -1;
    let grids = document.querySelector('.grids');
    let view = document.querySelector('.view');
    let viewW = view.clientWidth;
    let viewH = view.clientHeight;
    requestAnimationFrame(() => {
        play();
    })

    const end = () => {
        let ofx = (active >= trLenDif ? active - trLenDif : active)
        grids.style.transition = 'none';
        requestAnimationFrame(() => {
            grids.style.transform = `scale(0.4) translateX(-${ofx * viewW }px) translateY(-${activeTr * viewH}px)`;
            grids.style.transition = 'transform .3s 1s linear';
            grids.removeEventListener('transitionend',end)
            grids.addEventListener('transitionend', play)
        })
    }
    const play = () => {
        if (active % trLenDif == 0) {
            activeTr++;
        }
        let ofx = (active >= trLenDif ? active - trLenDif : active)
        let styleStr = `
                transform-origin:0px 0px;
                transform: scale(1) translateX(-${ofx * viewW}px) translateY(-${activeTr * viewH}px);
                transition: transform .3s 1s linear;
            `
        grids.removeAttribute('style');
        requestAnimationFrame(() => {
            grids.setAttribute('style', styleStr)
        })
        active++;
        if (active >= grids_items.length) {
            active = 0;
            activeTr = -1;
            grids.addEventListener('transitionend', play)
            return;
        }
        grids.removeEventListener('transitionend',play)
        grids.addEventListener('transitionend', end)
    }
</script>

</html>